<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model.trim="form.user_name" :disabled="true" />
      </el-form-item>
      <el-form-item label="新密码" prop="user_password">
        <el-input
          v-model.trim="form.user_password"
          placeholder="密码长度为6-50位"
        />
      </el-form-item>
      <el-form-item label="真实姓名" prop="true_name">
        <el-input
          v-model.trim="form.true_name"
          placeholder="修改用户真实姓名"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="user_mobile">
        <el-input
          v-model.trim="form.user_mobile"
          placeholder="修改用户手机号"
        />
      </el-form-item>
      <el-form-item label="邮箱" prop="user_email">
        <el-input v-model.trim="form.user_email" placeholder="修改用户邮箱" />
      </el-form-item>
      <el-form-item label="所属部门" prop="department_id">
        <el-cascader
          v-model="form.department_id"
          clearable
          :options="treeData"
          placeholder="请选择部门"
          :props="defaultProps"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/userManagement'
  import { getList, getDetail } from '@/api/organization'
  export default {
    name: 'UserEdit',
    data() {
      return {
        treeData: [],
        defaultProps: {
          children: 'sub_dep',
          label: 'dep_name',
          value: 'id',
          checkStrictly: true,
          emitPath: false,
        },
        form: {},
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    methods: {
      async showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
          this.form.user_id = this.form.id
          if (this.form.department_id) {
            const { data } = await getDetail({
              dep_id: this.form.department_id,
            })
            this.form.dep_name = data.info ? data.info.dep_name : '暂无部门'
          } else {
            this.form.dep_name = '暂无部门'
          }
        }
        this.dialogFormVisible = true
        this.fetchData()
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (!this.form.user_password) {
              this.editUser(this.form)
              return true
            }
            if (
              this.form.user_password.length < 6 ||
              this.form.user_password.length > 50
            ) {
              this.$baseMessage(
                '密码设置长度应为6-50位之间',
                'error',
                'vab-hey-message-error'
              )
            } else {
              this.editUser(this.form)
              return true
            }
          }
        })
      },
      handleNodeClick(node) {
        console.log(node, this.form)
        this.form.department_id = node.id
        this.form.dep_name = node.dep_name
        this.$forceUpdate()
      },
      async editUser(form) {
        const { data } = await doEdit(form)
        if (data.is_success) {
          this.$baseMessage('修改成功', 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      },
      async fetchData() {
        const data = await getList({})
        this.treeData = data.data.length > 0 ? data.data : []
      },
    },
  }
</script>
